<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Insert title here</title>
    <link rel="stylesheet"
          href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script
            src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
    <style>
        .imgs {
            width: 700px;
            height: 400px;
            background-position: center;
            background-size: cover;
        }
    </style>
</head>
<body background="<%=request.getContextPath() %>/img/background1.jpg">
<h2 align="center" style="margin-top: 20px;">网吧管理系统</h2>
<div>
    <div class="row " style="margin-top: 50px;">
        <div align="center" class="col-md-3">
            <ul class="list-group">
                <li class="list-group-item active "><a href="<%=request.getContextPath() %>/Super/User_about.jsp"><span
                        style="color: black">首页</span></a></li>
                <li class="list-group-item  "><a href="<%=request.getContextPath() %>/UserInfoServlet?userid=${sessionScope.userid}"><span
                        style="color: black">个人信息</span></a></li>
                <li class="list-group-item  "><a href="<%=request.getContextPath() %>/UserXiaofeiListServlet?userid=${sessionScope.userid}"><span
                        style="color: black">消费清单</span></a></li>
                <li class="list-group-item  "><a href="<%=request.getContextPath() %>/Super/User_exit.jsp"><span
                        style="color: black">退出</span></a></li>
            </ul>
        </div>
        <!-- 这个div -->
        <!-- 和这个div横向排序 -->
        <div class=" col-md-9 carousel slide"
             style="padding-left: 10px; width: 900px; height: 450px" id="demo"
             data-ride="carousel">
            <!-- 指示符 -->
            <ul class="carousel-indicators">
                <li data-target="#demo" data-slide-to="0" class="active"></li>
                <li data-target="#demo" data-slide-to="1"></li>
                <li data-target="#demo" data-slide-to="2"></li>
            </ul>

            <!-- 轮播图片 -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="imgs" src="<%=request.getContextPath() %>/img/rtimg001.jpg">
                </div>
                <div class="carousel-item">
                    <img class="imgs" src="<%=request.getContextPath() %>/img/rtimg002.jpg">
                </div>
                <div class="carousel-item">
                    <img class="imgs" src="<%=request.getContextPath() %>/img/rtimg003.jpg">
                </div>
            </div>

            <!-- 左右切换按钮 -->
            <a class="carousel-control-prev" href="#demo" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a> <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
        </div>
    </div>
</div>
<%--<jsp:include page="Super_footer.jsp"></jsp:include>--%>
</body>
</html>